<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0, user-scalable=no,target-densitydpi=device-dpi,viewport-fit=cover">
  <title></title>
  <style>

  </style>
</head>

<body>

  <h1 id="dianwo">点我</h1>
  <br>
  <h1 id="dianwo2">点我2</h1>

  <script>

    bindEvent(dianwo, function (that) {
      console.log('回调结果');
    });

    bindEvent2(dianwo2, function () {
      console.log('回调结果2');
    });

    function bindEvent2(el, cb) {
      var touchStartY
      el.ontouchstart = function (e) {
        touchStartY = e.changedTouches[0].clientY
      }
      el.ontouchend = function (e) {
        e.preventDefault()
        if (Math.abs(e.changedTouches[0].clientY - touchStartY) > 10)
          return
        cb && cb(el)
      }
    }

    function bindEvent(el, cb) {
      var touchStartY
      el.addEventListener('touchstart', function () {
        var e = event || window.event;
        touchStartY = e.changedTouches[0].clientY
      });
      el.addEventListener('touchend', function () {
        var e = event || window.event;
        e.preventDefault();
        if (Math.abs(e.changedTouches[0].clientY - touchStartY) > 10)
          return;
        cb && cb(el);
      });
    }


   /*  var slider = {
      events: {
        //滑动开始
        start: function (event) {
          var touch = event.targetTouches[0];     //touches数组对象获得屏幕上所有的touch，取第一个touch
          startPos = { x: touch.pageX, y: touch.pageY, time: +new Date };    //取第一个touch的坐标值
          isScrolling = 0;   //这个参数判断是垂直滚动还是水平滚动
          this.slider.addEventListener('touchmove', this, false);
          this.slider.addEventListener('touchend', this, false);
        },
        //移动
        move: function (event) {
          //当屏幕有多个touch或者页面被缩放过，就不执行move操作
          if (event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
          var touch = event.targetTouches[0];
          endPos = { x: touch.pageX - startPos.x, y: touch.pageY - startPos.y };
          isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1 : 0;    //isScrolling为1时，表示纵向滑动，0为横向滑动
          if (isScrolling === 0) {
            event.preventDefault();      //阻止触摸事件的默认行为，即阻止滚屏
            this.slider.className = 'cnt';
            this.slider.style.left = -this.index * 600 + endPos.x + 'px';
          }
        },
        //滑动释放
        end: function (event) {
          var duration = +new Date - startPos.time;    //滑动的持续时间
          if (isScrolling === 0) {    //当为水平滚动时
            this.icon[this.index].className = '';
            if (Number(duration) > 10) {
              //判断是左移还是右移，当偏移量大于10时执行
              if (endPos.x > 10) {
                if (this.index !== 0) this.index -= 1;
              } else if (endPos.x < -10) {
                if (this.index !== this.icon.length - 1) this.index += 1;
              }
            }
            this.icon[this.index].className = 'curr';
            this.slider.className = 'cnt f-anim';
            this.slider.style.left = -this.index * 600 + 'px';
          }
          //解绑事件
          this.slider.removeEventListener('touchmove', this, false);
          this.slider.removeEventListener('touchend', this, false);
        }
      },

      //初始化
      init: function () {
        var self = this;     //this指slider对象
        if (!!self.touch) self.slider.addEventListener('touchstart', self.events, false);    //addEventListener第二个参数可以传一个对象，会调用该对象的handleEvent属性
      }
    }; */


  </script>
</body>

</html>